<template>
  <div class="cus">
    <div class="cus_box" style="width:1000px;">
      <div class="title"><span>已关联设备</span><i @click="$emit('Associated_devices_call')"
          class="el-icon-close"></i></div>
      <div class="content">
        <div>
          <r-search :searchForm="searchForm" :searchHandle="searchHandle"
            :searchData="searchData" />
          <!--                  <div><el-button size="mini" type="primary">解除关联</el-button></div>-->
          <el-table :data="tableData" height="250" border style="width: 100%;">
            <el-table-column prop="id" label="ID" width="180">
            </el-table-column>
            <el-table-column prop="sn" label="设备编号" width="180">
            </el-table-column>
            <el-table-column prop="deviceName" label="设备名称">
            </el-table-column>
            <el-table-column v-if="role=='platform'" prop="operatorName" label="运营商">
            </el-table-column>
            <el-table-column v-if="role=='operator'" prop="agentName" label="代理商">
            </el-table-column>
            <el-table-column prop="address" label="设备地址">
            </el-table-column>
            <el-table-column prop="useStatusDes" label="设备状态">
            </el-table-column>
            <el-table-column prop="lastTime" label="更新时间">
            </el-table-column>
            <el-table-column label="操作" fixed="right">
              <template slot-scope="scope">
                <el-button @click="unBind(scope.row)" size="mini" type="primary">解除绑定</el-button>
              </template>
            </el-table-column>
          </el-table>

        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Associated_devices",
  data() {
    return {
      searchData: {
        sn: '',
      },
      searchForm: [
        {
          type: 'input',
          prop: 'sn',
          placeholder: '设备编号',
          width: 150
        },
        {
          type: 'select',
          prop: 'operatorId',
          placeholder: '运营商',
          width: 150,
          options: [],
          isShow: () => {
            return this.role == 'platform' ? true : false
          }
        },
        {
          type: 'select',
          prop: 'agentId',
          placeholder: '代理商',
          width: 150,
          isShow: () => {
            return this.role == 'operator' ? true : false
          }
        },
      ],
      searchHandle: [
        {
          label: '搜索',
          type: 'success',
          icon: 'el-icon-search',
          handle: e => this.getData()
        }
      ],

      tableData: []

    }
  },
  props: ['res'],
  computed: {
    role() {
      return sessionStorage.role;
    }
  },
  mounted() {
    this.getData();
    this.get_operator_list();
    this.get_agent_list();
  },
  methods: {
    async getData() {
      const res = await this.apis.device_list({
        pageNum: 1,
        pageSize: 100000,
        deviceType: '3',
        mealId: this.res.id,
        sn: this.searchData.sn,
        operatorId: this.searchData.operatorId,
        agentId: this.searchData.agentId
      });
      const list = res.rows || [];
      list.map(res => {
        if (res.useStatus == 1) {
          res.useStatusDes = '启用'
        } else if (res.useStatus == 2) {
          res.useStatusDes = '禁用'
        }
      })
      this.tableData = list;
    },
    async get_operator_list() {
      const res = await this.apis.operator_list({
        pageNum: 1,
        pageSize: 100000
      });
      const list = res.rows || [];
      let options = [];
      list.map(res => {
        options.push({
          value: res.id,
          label: res.name
        })
      });

      this.searchForm[this.labIndex2(this.searchForm, 'operatorId')].options = options;
    },
    async get_agent_list() {
      const res = await this.apis.agent_list({
        pageNum: 1,
        pageSize: 100000
      });
      const list = res.rows || [];
      let options = [];
      list.map(res => {
        options.push({
          value: res.id,
          label: res.name
        });
      });
      this.searchForm[this.labIndex2(this.searchForm, 'agentId')].options = options;

    },
    unBind(row) {
      this.$confirm('确定要解除绑定吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        const res = await this.apis.mealCharge_delDevice({
          id: row.id
        });
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
        this.getData();
      }).catch(() => {

      });
    }
  }
}
</script>

<style scoped lang="scss">
</style>
